<template>
  <view class="login-container">
    <!-- 顶部图片 -->
    <view class="logo-container">
      <image class="logo" src="/static/logo.png" mode="aspectFit"></image>
      <text class="app-name">面试宝典</text>
      <text class="app-slogan">助你轻松备战面试</text>
    </view>
    
    <!-- 登录区域 -->
    <view class="login-box">
      <view class="welcome-text">
        <text class="welcome-title">欢迎使用面试宝典</text>
        <text class="welcome-desc">登录后可享受更多功能</text>
      </view>
      
      <!-- 登录按钮 -->
      <view class="login-buttons">
        <button 
          class="wechat-login-btn" 
          open-type="getUserInfo" 
          @getuserinfo="handleGetUserInfo"
        >
          <text>微信一键登录</text>
        </button>
        
      <!--  <view class="other-login-options">
          <view class="divider">
            <view class="line"></view>
            <text>其他登录方式</text>
            <view class="line"></view>
          </view>
          
          <view class="option-buttons">
            <button class="option-btn phone-btn" @click="navigateToPhoneLogin">
              <text>手机号登录</text>
            </button>
            <button class="option-btn visitor-btn" @click="loginAsVisitor">
              <text>游客访问</text>
            </button>
          </view>
        </view> -->
      </view>
    </view>
    
    <!-- 底部协议 -->
    <view class="agreement">
      <checkbox :checked="agreePolicy" @click="toggleAgreement" color="#f6960a" />
      <text class="agreement-text">
        登录即表示您已同意
        <text class="link" @click="showUserAgreement">《用户协议》</text>
        和
        <text class="link" @click="showPrivacyPolicy">《隐私政策》</text>
      </text>
    </view>
    
    <!-- 登录中弹窗 -->
    <view v-if="isLoading" class="loading-overlay">
      <view class="loading-content">
        <view class="loading-icon"></view>
        <text>登录中...</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref,onMounted } from 'vue';

// 状态变量
const agreePolicy = ref(false);
const isLoading = ref(false);

// 切换协议同意状态
const toggleAgreement = () => {
  agreePolicy.value = !agreePolicy.value;
};

// 显示用户协议
const showUserAgreement = () => {
  uni.navigateTo({
    url: '/pages/agreement/user-agreement'
  });
};

// 显示隐私政策
const showPrivacyPolicy = () => {
  uni.navigateTo({
    url: '/pages/agreement/privacy-policy'
  });
};

// 跳转到手机号登录页面
/* const navigateToPhoneLogin = () => {
  uni.navigateTo({
    url: '/pages/login/phone-login'
  });
}; */

// 游客访问
/* const loginAsVisitor = () => {
  if (!agreePolicy.value) {
    uni.showToast({
      title: '请先同意用户协议和隐私政策',
      icon: 'none'
    });
    return;
  }
  
  // 直接跳转到题目页面，不保存登录状态
  uni.switchTab({
    url: '/pages/question/question'
  });
}; */

// 处理微信登录
const handleGetUserInfo = (e) => {
  if (!agreePolicy.value) {
    uni.showToast({
      title: '请先同意用户协议和隐私政策',
      icon: 'none'
    });
    return;
  }
  
  // 检查用户是否授权
  if (e.detail.userInfo) {
    // 用户同意授权
    wechatLogin(e.detail.userInfo);
  } else {
    // 用户拒绝授权
    uni.showToast({
      title: '您拒绝了授权，部分功能将无法使用',
      icon: 'none'
    });
  }
};

// 微信登录流程
const wechatLogin = (userInfo) => {
  isLoading.value = true;
  
  // 调用微信登录接口
  wx.login({
    success: (res) => {
      if (res.code) {
        // 获取到登录临时凭证code
        console.log(res.code)
        sendCodeToServer(res.code);
      } else {
        isLoading.value = false;
        uni.showToast({
          title: '登录失败，请重试',
          icon: 'none'
        });
      }
    },
    fail: () => {
      isLoading.value = false;
      uni.showToast({
        title: '微信登录失败，请重试',
        icon: 'none'
      });
    }
  });
};

// 将code发送到服务器换取登录态
const sendCodeToServer = async (code) => {
  try {
    const res = await uni.$http.post('/api/v1/auth/login', {
      code: code,
    });
    console.log(res.data)
    if (res.data.token) {
      // 登录成功，保存token
      console.log(res.data.token)
      uni.setStorageSync('token', res.data.token);
      // 显示登录成功提示
      uni.showToast({
        title: '登录成功',
        icon: 'success'
      });
      
      // 延迟跳转到题目页面
      setTimeout(() => {
        uni.switchTab({
          url: '/pages/question/question'
        });
      }, 1500);
    } else {
      throw new Error(res.data.message || '登录失败');
    }
  } catch (error) {
    console.error('登录请求失败:', error);
    uni.showToast({
      title: error.message || '登录失败，请重试',
      icon: 'none'
    });
  } finally {
    isLoading.value = false;
  }
};

// 页面加载时检查是否已登录
onMounted(() => {
  const token = uni.getStorageSync('token');
  if (token) {
    // 已登录，直接跳转到题目页面
    uni.switchTab({
      url: '/pages/question/question'
    });
  }
});
</script>

<style lang="scss">
.login-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #fff;
  padding: 40rpx;
  box-sizing: border-box;
  
  .logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 60rpx;
    margin-bottom: 80rpx;
    
    .logo {
      width: 180rpx;
      height: 180rpx;
      margin-bottom: 30rpx;
    }
    
    .app-name {
      font-size: 48rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 20rpx;
    }
    
    .app-slogan {
      font-size: 28rpx;
      color: #666;
    }
  }
  
  .login-box {
    flex: 1;
    
    .welcome-text {
      margin-bottom: 60rpx;
      text-align: center;
      .welcome-title {
        display: block;
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 20rpx;
      }
      
      .welcome-desc {
        font-size: 28rpx;
        color: #666;
      }
    }
    
    .login-buttons {
      .wechat-login-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 90rpx;
        background-color: #07c160;
        color: #fff;
        border-radius: 45rpx;
        font-size: 32rpx;
        margin-bottom: 60rpx;
        
        .wechat-icon {
          width: 40rpx;
          height: 40rpx;
          margin-right: 20rpx;
        }
      }
      
   /*   .other-login-options {
        .divider {
          display: flex;
          align-items: center;
          margin: 40rpx 0;
          
          .line {
            flex: 1;
            height: 1rpx;
            background-color: #e5e5e5;
          }
          
          text {
            padding: 0 30rpx;
            font-size: 26rpx;
            color: #999;
          }
        }
        
        .option-buttons {
          display: flex;
          justify-content: space-between;
          
          .option-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 45%;
            height: 80rpx;
            background-color: #f5f5f5;
            border-radius: 20rpx;
            padding: 0;
            
            text {
              font-size: 28rpx;
              color: #333;
            }
            
            &.phone-btn {
              image {
                width: 50rpx;
                height: 50rpx;
              }
            }
          }
        }
      } */
    }
  }
  
  .agreement {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40rpx;
    margin-bottom: 40rpx;
    
    .agreement-text {
      font-size: 24rpx;
      color: #666;
      margin-left: 10rpx;
      
      .link {
        color: #f6960a;
      }
    }
  }
  
  .loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    
    .loading-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #fff;
      border-radius: 20rpx;
      padding: 40rpx;
      
      .loading-icon {
        width: 80rpx;
        height: 80rpx;
        border: 6rpx solid #f3f3f3;
        border-top: 6rpx solid #f6960a;
        border-radius: 50%;
        margin-bottom: 30rpx;
        animation: spin 1s linear infinite;
      }
      
      text {
        font-size: 28rpx;
        color: #333;
      }
    }
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

